<template>
  <div class="section" :class="typeImg[type]">
    <div class="section-title">
      <div class="section-header">
        <img :src="img[imgType]" class="section-header-img" :class="{'section-header-opcation':imgType==3,'section-light':imgType=='car_jiankong'}">
        <span :class="{'section-header-span':imgType==3}">{{title}}</span>
      </div>
	  <slot name="close"></slot>
      <template v-if="$slots.right">
        <slot name="right"></slot>
      </template>
      <template v-else>
        <Icon custom="i-icon icon-jiantou2"
              size="18"
              class="cursor-pointer section-icon"
              v-if="rightIcon"
              @click="onClickRightIcon" />
      </template>
    </div>
    <slot></slot>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    imgType: {//图片显示
      type: String,
      default: '0',
    },
    title: String,
    rightIcon: Boolean,
	type:Number//控制背景图
  },
  data () {
    return {
		typeImg:[
			'section_img1',
			'section_img2',
			'section_img3',
			'section_img4',
			'section_img5',
			'section_img6',
			'section_img7',
			'section_img8',
			'section_img9',
			'section_img10',
			'section_img11',
			'section_img12',
			'section_img13',
			'section_img14'
		],
		img:{
			'newCar':require('../../../../assets/new/new_car.png'),
			'newWork':require('../../../../assets/new/new_work.png'),
			'newAbnormal':require('../../../../assets/new/new_abnormal.png'),
			'car_jiankong':require('../../../../assets/new/new_car_jiankong.png'),
			'text':require('../../../../assets/new/new_text.png'),
			'work':require('../../../../assets/new/new_img_worknum.png'),
			'garbage':require('../../../../assets/new/new_img_laji.png'),
			'use':require('../../../../assets/new/new_img_use.png'),
			'comp':require('../../../../assets/new/new_comp.png'),
			'tree':require('../../../../assets/new/tree_icon.png'),
			'plan':require('../../../../assets/new/new_plan.png'),
			'sl':require('../../../../assets/new/new_plan_sl.png'),
			'detail':require('../../../../assets/new/new_detail.png')
		}
    };
  },
  mounted () {
    this.init()
  },
  methods: {
    init () {

    },
    onClickRightIcon () {
      this.$emit('onClickRightIcon')
    }
  },
}
</script>

<style lang='scss' scoped>
.section {
  background-position: top;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  .section-title {
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
	opacity: 0.9;
	.section-header{
		width: 160px;
		height: 54px;
		background: url(../../../../assets/new/new_light.png) 0 0 no-repeat;
		background-size: 100% 100%;
		display: flex;
		align-items: center;
		margin-left: 21px;
		margin-top: 37px;
		.section-header-opcation{
			opacity: 0;
		}
		.section-header-span{
			color: #00BAFF;
		}
		.section-header-img{
			width: 18px;
			height: 18px;
			margin: 0 11px 0 22px;
		}
		.section-light{
			width: 22px;
			height: 22px;
			margin: 0 8px 0 20px;
		}
	}
	.section-icon{
		margin: 55px 31px 0 0;
	}
  }
}
.section_img1{
	width: 362px;
	height: 283px;
	background-image: url(../../../../assets/new/new_img_2.png);
}
.section_img2{
	width: 362px;
	height: 313px;
	background-image: url(../../../../assets/new/new_img_313.png);
}
.section_img3{
	width: 362px;
	height: 323px;
	background-image: url(../../../../assets/new/new_img_323.png);
}
.section_img4{
	width: 362px;
	height: 343px;
	background-image: url(../../../../assets/new/new_img_343.png);
}
.section_img5{
	width: 362px;
	height: 429px;
	background-image: url(../../../../assets/new/new_img_430.png);
}
.section_img6{
	width: 362px;
	height: 436px;
	background-image: url(../../../../assets/new/new_img_436.png);
}
.section_img7{
	width: 362px;
	height: 213px;
	background-image: url(../../../../assets/new/new_img_213.png);
}
.section_img8{
	width: 362px;
	height: 567px;
	background-image: url(../../../../assets/new/new_img_567.png);
}
.section_img9{
	width: 362px;
	height: 607px;
	background-image: url(../../../../assets/new/new_img_607.png);
}
.section_img10{
	width: 362px;
	height: 289px;
	background-image: url(../../../../assets/new/new_img_289.png);
}
.section_img11{
	width: 362px;
	height: 353px;
	background-image: url(../../../../assets/new/new_img_353.png);
}
.section_img12{
	width: 362px;
	height: 520px;
	background-image: url(../../../../assets/new/new_img_520.png);
}
.section_img13{
	width: 362px;
	height: 688px;
	background-image: url(../../../../assets/new/new_img_688.png);
}
.section_img14{
	width: 362px;
	height: 767px;
	background-image: url(../../../../assets/new/new_img_767.png);
}
</style>